import React from 'react'
import DeleteIcon from "../../../res/images/web/topic/delete@2x.png";
import {withRouter} from 'react-router-dom'
import LocalStorageService from "../../../utils/LocalStorageService";

const CommentItem = props => {

    const {
        Hfavatar,
        Hfname,
        Zant,
        Htid,
        Hfuid,
        Hftxt,
    } = props.comment
    const c = props.comment
    const commentType = props.commentType

    const avatar = <div
        style={{marginRight: '8px'}}
        onClick={() => props.history.push(`../${commentType}/${Htid}`)}
    >
        <img src={Hfavatar} alt='' className='my-topic-item-avatar'/>
    </div>
    const name = <p style={{marginBottom: '4px',}}>{Hfname}</p>
    const date = <p className='gray-text' style={{marginBottom: '10px',}}>{props.formatDate(Zant)}</p>
    const self = Hfuid === LocalStorageService.get('userid')
    const myTxt = <p style={{wordBreak: 'break-all'}}>{`评论：${Hftxt}`}</p>
    const otherTxt = <p style={{wordBreak: 'break-all'}}>{`回复您：${Hftxt}`}</p>
    const deleteIcon = <img
        alt=''
        src={DeleteIcon}
        style={{
            position: 'absolute',
            top: '16px',
            right: '16px',
            width: '24px',
            height: '24px',
            zIndex: 2,
        }}
        onClick={() => props.onDelete(c, commentType)}
    />
    return <div
        className='my-topic-zan-ctn flex'
    >
        {avatar}
        <div
            onClick={() => props.history.push(`../topic/${Htid}`)}
        >
            {name}
            {date}
            {self ? myTxt : otherTxt}
        </div>
        {self ? deleteIcon : null}
    </div>

    return null
}

export default withRouter(CommentItem)
